<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />
        
        <helloWorld ref="helloword" :pmsg="vueData.msg" />

        <pinaCom />

        <animation />

        <layout />

        <aaa />
    </div>
</template>

<script setup>
// @ is an alias to /src
import aaa from "@/components/aaa.vue"
import { getCurrentInstance, onMounted, reactive, ref, toRefs, useTemplateRef } from "vue";
import helloWorld from "@/components/HelloWorld.vue";
import pinaCom from './pinia.vue';
import animation from '@/components/animation.vue'
import layout from './layout.vue'
const $inst = getCurrentInstance();
const helloword = ref(null);
const h1 = useTemplateRef('helloword');
const vueData = reactive({
    msg: "这是home组件传入数据",
});

onMounted(() => {
    console.log(helloword.value.fontColor);
    console.log($inst.refs.helloword.fontColor);
    console.log($inst.proxy.$refs.helloword.fontColor);
    // $inst.refs.helloword.goParent();

    console.log("-------------------");
    console.log(h1.value.fontColor);
});

function alertMsg() {
    alert(vueData.msg);
};

//暴露属性出去，否则子组件直接访问undefined
defineExpose({
    // vueData,
    ...toRefs(vueData),
    alertMsg
})

</script>
